<template>
  <div>
    <van-nav-bar
      title="学员通知列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight()">
      <template #right>
          <van-icon name="add" size="18" />
        </template>
    </van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <van-card
          v-for="item in list" :key="item" :title="item"
          num="2"
          price="2.00"
          desc=item
          title=item+item
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          @click="onClickCard()"/>
      </van-list>
    </van-pull-refresh>
    <van-dialog class="dialogSelf" v-model="show" :before-close="beforeClose()" title="标题" show-cancel-button>
      <div class="dialogContent">
        <van-dropdown-menu>
          <van-dropdown-item v-model="type" :options="types" />
        </van-dropdown-menu>
        <van-divider></van-divider>
        <van-field v-model="title" placeholder="请输入通知标题" />
        <van-divider></van-divider>
        <van-cell center title="同时发送短信给学员">
          <template #right-icon>
            <van-switch v-model="checked" size="24" />
          </template>
        </van-cell>
        <van-divider></van-divider>
        <van-field
          v-model="notiContent"
          rows="5"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请输入通知内容"
          show-word-limit
        />
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  data() {
      return {
        role:-1,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        show:false,
        type: -1,
        types: [
          { text: '请选择学员班级', value: -1 },
          { text: '临时一班', value: 0 },
          { text: '临时二班', value: 1 },
          { text: '临时三班', value: 2 },
          { text: '临时四班', value: 3 },
        ],
        title:'',
        checked:false,
        notiContent:''
      };
    },
    methods: {
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }

          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          this.loading = false;

          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 1000);
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onClickLeft() {
        this.$router.push({path:'/home',query:{role:this.$data.role}})
      },
      onClickCard() {
        //this.$router.push({path:'/classDetail',query:{role:this.$data.role}})
      },
      onClickRight() {
        this.show = true
      },
      beforeClose(action, done) {
        if (action === 'confirm') {
          //setTimeout(done, 1000);
        } else {
          //done();
        }
      }
    },
}
</script>

<style>
  .dialogSelf {
    height: 500px;
  }
  .dialogContent {
    width: 100%;

    /* max-height: 300px; */
    /* min-height: 120px; */
    height: 405px;
  }
</style>
